<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>用户登录</title>
    <!-- General CSS Files -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <link rel="stylesheet" href="assets/css/app.min.css">
    <link rel="stylesheet" href="assets/bundles/bootstrap-social/bootstrap-social.css">
    <!-- Template CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/components.css">
    <!-- Custom style CSS -->
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel="stylesheet" href="assets/css/element.css">
    <link rel='shortcut icon' type='image/x-icon' href='assets/img/favicon.ico'/>
</head>

<body>
<div class="loader"></div>
<div id="app">
    <section class="section">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h4>登录</h4>
                        </div>
                        <div class="card-body">
                            <form class="needs-validation">
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input id="email" type="email" class="form-control" name="username" tabindex="1"
                                           required placeholder="请输入你的邮箱" v-model="email">
                                </div>
                                <div class="form-group">
                                    <label for="password">密码</label>
                                    <div class="float-right">
                                        <a th:href="@{/reset}" class="text-small">
                                            忘记密码?
                                        </a>
                                    </div>
                                    <input id="password" type="password" class="form-control" name="password"
                                           tabindex="2" required placeholder="请输入你的密码" v-model="pswd">
                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary btn-lg btn-block" tabindex="5"
                                            @click="userLogin()">
                                        登录
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="mt-5 text-muted text-center">
                        还没有账号? <a th:href="@{/register}">创建一个</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- General JS Scripts -->
<script src="assets/js/jquery-3.4.1.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- JS Libraies -->
<script src="assets/js/vue.js"></script>
<script src="assets/js/dataParse.js"></script>
<script src="assets/js/element.js"></script>
<script src="assets/js/axios.js"></script>
<!-- Page Specific JS File -->
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script>
    let token = $("meta[name='_csrf']").attr("content");
    let header = $("meta[name='_csrf_header']").attr("content");
    axios.defaults.headers.common[header] = token;

    const app = new Vue({
        el: "#app",
        data() {
            return {
                email: "",
                pswd: "",
            }
        },
        methods: {
            userLogin() {
                axios({
                    method: "post",
                    url: "/userLogin",
                    transformRequest: [
                        function (data) {
                            return parseParams(data);
                        }
                    ],
                    data: {
                        username: this.email,
                        password: this.pswd
                    }
                }).then((response) => {
                    if (response.data.success) {
                        window.location.href = "http://localhost/index";
                    }else {
                        this.$notify.error({
                            title: '登录失败',
                            message: '请检查所填项是否正确!',
                            position: 'bottom-right'
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>